{extend name="layout" /}
{block name="content"}
<!--主窗体start-->
<div id="content" class="content">
    <!-- begin breadcrumb -->
    <ol class="breadcrumb pull-right">
        <li><a href="{:url('Admin/Index/index')}">首页</a></li>
        <li><a href="javascript:;">地图定位</a></li>
        <li class="active">地图定位</li>
    </ol>
    <!-- end breadcrumb -->
    <!-- begin page-header -->
    <h1 class="page-header">地图定位
        <small></small>
    </h1>
    <!-- end page-header -->
    <!--地图start-->
    <div class="panel panel-inverse">
        <div class="panel-heading">
            <div class="panel-heading-btn">
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i
                        class="fa fa-expand"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i
                        class="fa fa-repeat"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i
                        class="fa fa-minus"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i
                        class="fa fa-times"></i></a>
            </div>
            <h4 class="panel-title">已定义电气回路</h4>
        </div>
        <div class="panel-body">
            <div id="container" style="height: 600px;"></div>
        </div>
    </div>
    <!--地图end-->
</div>
<!--主窗体end-->
{/block}
{block name="script"}
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=31fa703583fbe36992cfeea04b445cc4"></script>
<!--  ================== END PAGE LEVEL JS ================== -->
<script>
    $(document).ready(function () {
        var map = new AMap.Map("container", {resizeEnable: true});
        var lnglats = [
            [116.368904, 39.923423],
            [116.382122, 39.921176],
            [116.387271, 39.922501],
            [116.398258, 39.914600]
        ];
        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
        for (var i = 0, marker; i < lnglats.length; i++) {
            var marker = new AMap.Marker({
                position: lnglats[i],
                map: map
            });
            marker.content = '我是第' + (i + 1) + '个工厂';
            marker.on('click', markerClick);
            marker.emit('click', {target: marker});
        }
        function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
        }
        map.setFitView();
    });
</script>
{/block}
